﻿
(function($) {
    $.fn.extend({
        slider: function(options) {
            var settings = $.extend({
                speed: 500
            }, options);
            return this.each(function() {
                var slidercontents = $(this).addClass('image-slider2-contents');
                var slider = $('<div/>').addClass('image-slider2').attr('id', slidercontents.attr('id'));
                var backbutton = $('<div/>').addClass('image-slider2-back');
                var forwardbutton = $('<div/>').addClass('image-slider2-forward');
                slidercontents.removeAttr('id');
                slidercontents.before(slider);
                slider.append(backbutton);
                slider.append(slidercontents);
                slider.append(forwardbutton);
                var total = $('> div', slidercontents).length;
                var left = 0;
                var w;
                var width;
                var maxScroll;
                slider.append($('<div/>').css('display', 'none').addClass('preview').append($('<div/>').addClass('img-large')
                                                                                                       .append($('<div/>').html('&nbsp').click(function(e) {
                                                                                                           e.stopPropagation();
                                                                                                           e.stopImmediatePropagation();
                                                                                                           //display previous image
                                                                                                           var img = $(this).parent().find('img');
                                                                                                           var index = parseInt(img.attr('class'));
                                                                                                           img.removeAttr('class');
                                                                                                           if (index > 1) {
                                                                                                               index--;
                                                                                                               var src = $('.' + index + ' div img').attr('src');
                                                                                                               var txt = $('.' + index + ' div a').html();
                                                                                                               $('.preview').find('.label').html(txt);
                                                                                                               $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
                                                                                                           }
                                                                                                           else
                                                                                                               $('.preview').find('img').addClass('' + (index) + '');
                                                                                                       }).addClass('left').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
                                                                                                       .append($('<div/>').html('&nbsp').click(function(e) {
                                                                                                           e.stopPropagation();
                                                                                                           e.stopImmediatePropagation();
                                                                                                           //display next image
                                                                                                           var img = $(this).parent().find('img');
                                                                                                           var index = parseInt(img.attr('class'));
                                                                                                           img.removeAttr('class');
                                                                                                           if (index < total) {
                                                                                                               index++;
                                                                                                               var src = $('.' + index + ' div img').attr('src');
                                                                                                               var txt = $('.' + index + ' div a').html();
                                                                                                               $('.preview').find('.label').html(txt);
                                                                                                               $('.preview').find('img').addClass('' + (index) + '').css('opacity', '0').attr('src', src).stop(false, true).animate({ opacity: 1 }, 1000);
                                                                                                           }
                                                                                                           else
                                                                                                               $('.preview').find('img').addClass('' + (index) + '')
                                                                                                       }).addClass('right').css('opacity', '0.5').hover(function() { $(this).css('opacity', '1') }, function() { $(this).css('opacity', '0.5') }))
                                                                                                       .append($('<img/>'))).append($('<div/>').addClass('label').css('opacity', '0.8'))
                                                                                                       .append($('<div/>').addClass('close').click(function(e) {
                                                                                                           $(this).parent().fadeOut("slow");
                                                                                                       })));
                $(document).click(function(e) {
                    if ($('.preview').css('display') == 'block')
                        $('.preview').fadeOut("slow");
                });
                function initialize() {
                    var tempElements = $('> div', slidercontents);
                    var allElements = new Array();
                    tempElements.each(function(index, el) {
                        allElements.push($('<div/>').addClass('' + (index + 1) + '').addClass('outer').append(el));
                    });

                    allElements = $(allElements);
                    $('> div', slidercontents).remove();
                    var wrapper = $('<div/>').addClass('contents-wrapper');
                    allElements.each(function(index, el) {

                        wrapper.append($(el));
                    });
                    slidercontents.append(wrapper);
                    var w = $('.outer:eq(0)', slidercontents).outerWidth() + parseFloat($('.outer:eq(0)', slidercontents).css('margin-left')) + parseFloat($('.outer:eq(0)', slidercontents).css('margin-right'));
                    var width = (total+1) * w;
                    var maxScroll = width - $('.image-slider2-contents').outerWidth();
                    wrapper.css({ width: width });
                    $('> div > div', slidercontents).css('display', '');
                    $('.outer', slidercontents).each(function(index) {
                        $(this).prepend($('<img/>').attr('src', 'images/zoom.png').addClass('zoom')
                                                   .css({ cursor: 'pointer', 'position': 'relative', 'float': 'right', marginRight: -10, top: -14, width: 34, height: 32 }));

                    });
$('.outer a').click(function(e){
							 e.stopPropagation();
							 e.stopImmediatePropagation();
							 
							 });
                    $('.outer').hover(function() { $(this).addClass('active'); }, function() { $(this).removeClass('active'); }).click(
                                                     function(e) {
                                                         e.stopPropagation();
                                                         e.stopImmediatePropagation();
                                                         var cls = $(this).attr('class').split(' ')[0];
                                                         var p = $(this).find('div');
                                                         var img = p.find('img').attr('src');
                                                         var preview = $('.preview');
                                                         var l = $('.image-slider2').width()/2 - preview.outerWidth() / 2;
                                                         var t = (p.offset().top - preview.height());
                                                         t -= t / 2;
                                                         preview.css({ left: l, top: t });
                                                         var text = p.find('a').html();
                                                         preview.find('img').attr('src', img).addClass(cls);
                                                         preview.find('.label').html(text);
                                                         preview.fadeIn("slow");

                                                     });

                    forwardbutton.click(function() {
                        left -= w;
                        if (left + maxScroll >= 0) {
                            $('.contents-wrapper').stop(false, true).animate({ left: '-=' + w }, settings.speed);
                        }
                        else
                            left += w;
                    });
                    backbutton.click(function() {
                        if (left < 0) {
                            left += w;
                            $('.contents-wrapper').stop(false, true).animate({ left: '+=' + w }, settings.speed);
                        }
                    });
                }
                initialize();

                function getDimensions(value) {
                    return value + 'px';
                }

            });
        }
    });
})(jQuery);
